<template>
  <nav id="nav">
    <router-link to="/">首页</router-link>
    <router-link to="/articles">查百科</router-link>
    <router-link to="/diaries">看日记</router-link>
    <router-link to="/hosipitals">找机构</router-link>
    <router-link to="/doctors">找医生</router-link>
  </nav>
</template>

<script>
export default {
  name: 'Nav',
  props: {
    msg: String
  }
}
</script>

<style scoped lang="scss">
  nav#nav {
    width: 100%;
    display: flex;
    font-size: rem(28px);
    line-height: rem(60px);
    background-color: #f3f3f3;

    a {
      display: block;
      width: 20%;
      text-align: center;
      color: #333;

      &.router-link-active {
        color: #2a8ab3;
        border-bottom: 2px solid #2a8ab3;
      }
    }
  }
</style>
